import { memo, useEffect } from 'react'
import { Form, Input, Select, Checkbox } from 'antd'
import { QuestionTitlePropsType } from '../interface'

const PropComponent = memo((props: QuestionTitlePropsType) => {
  const { text, level, isCenter, disabled, onChange } = props
  const [form] = Form.useForm()

  useEffect(() => {
    form.setFieldsValue({
      text,
      level,
      isCenter,
    })
  }, [text, level, isCenter])

  const handleFormChange = () => {
    onChange && onChange(form.getFieldsValue())
  }

  return (
    <Form
      form={form}
      layout="vertical"
      onValuesChange={handleFormChange}
      initialValues={{
        text,
        level,
        isCenter,
      }}
      disabled={disabled}
    >
      <Form.Item
        label="标题内容"
        name="text"
        rules={[{ required: true, message: '请输入标题内容' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item label="标题级别" name="level">
        <Select
          options={[
            { label: '一级标题', value: 1 },
            { label: '二级标题', value: 2 },
            { label: '三级标题', value: 3 },
          ]}
        ></Select>
      </Form.Item>
      <Form.Item label="" name="isCenter" valuePropName="checked">
        <Checkbox>居中显示</Checkbox>
      </Form.Item>
    </Form>
  )
})

export default PropComponent
